<template>
  <div class="form-item">
    <div class="form-body" :class="{ active: active }">
      <div class="pr">
        <van-field
          v-model="username"
          @focus="active = true"
          @blur="active = false"
          :error="error"
          placeholder="获取验证码"
        />
        <div class="code-button">
          <button type="button">获取验证码</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Username",
  data() {
    return {
      username: "",
      error: false,
      active: false,
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.code-button {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    border: node;
    background: none;
    line-height: 24px;
    button {
      padding: 0;
      border: none;
      background: none;
    }
}
</style>